


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        #div1 div{
            border: 1px solid #000;
            width: 300px;
            height: 200px;
            display: none;
        }
        #div1 button{
            width: 98px;
            height: 30px;
            border: none;
            outline: none;
        }
    </style>
    <script>
                window.onload = function () {
            var t1 = new Tab("#div1");
            t1.init();
            var t2 = new Tab("#div2");
            t2.init();
        }

        function Tab(id) {
            this.oDiv = document.querySelector(id);
            this.aBtn = this.oDiv.querySelectorAll("button");
            this.aDiv = this.oDiv.querySelectorAll("div");
        }
        Tab.prototype.init = function () {
            var This = this;
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function () {
                    This.change(this)
                };
            }
        }

        Tab.prototype.change = function (obj) {
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].style.backgroundColor = "";
                this.aDiv[i].style.display = "none";
            }
            obj.style.backgroundColor = "red";
            this.aDiv[obj.index].style.display = "block";
        }
        
        function car(book,price,shuoming){
			var obj = new Object();
			obj.book = book;
			obj.price = price;
			obj.shuoming = shuoming;
			obj.sayName = function(){
				alert("我们的车的资格证为"+this.book+",建议零售价为"+this.price+",请仔细看说明书"+this.shuoming)
			}
			return obj;
		}
		var car1 = car("123",1000000,"456")
		car1.sayName()
		
		
		function Person(name,age,sex)
		{
			this.name = name;
			this.age = age;
			this.sex = sex;
			this.sayName=function()
			{
				alert("大家好，我是"+this.name+"/"+"今年"+this.age+"岁"+this.sex+"的");
			}
			this.boyfirend = function(){
				alert("大家好，我是小明的男朋友")
			}
		}
		var person1 = new Person("小明",19,"男")
		person1.sayName();
		person1.boyfirend()
    </script>
</head>
<body>

<div id="div1">
    <button style="background-color: red;">1</button>
    <button>2</button>
    <button>3</button>
    <div style="display: block">111111111111</div>
    <div>222222222222</div>
    <div>333333333333</div>
</div>

</body>
</html>
